<template>
  <div class="modifyinoutcome">
    <h3>修改 收入 记录</h3>
    <!-- ref:节点名称，rules：字段规则 -->
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <!-- 收支日期  -->
      <el-form-item label="收支日期" required>
        <el-col :span="11">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="ruleForm.date"
            style="width: 100%"
          ></el-date-picker>
        </el-col>
      </el-form-item>
      <!-- 收支类别 -->
      <el-form-item label="收支类别">
        <el-select v-model="ruleForm.inouttype" placeholder="请选择">
          <el-option
            v-for="item in ruleForm.collect"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-button type="success" class="btn"
          ><i class="el-icon-menu"></i>新增</el-button
        >
      </el-form-item>
      <!-- 收支金额 -->
      <el-form-item label="收支金额">
        <el-input v-model="ruleForm.allmoney"></el-input>
        <span> 元</span>
      </el-form-item>
      <!-- 资金账户 -->
      <el-form-item label="资金账户">
        <el-select v-model="ruleForm.moneyaccount" placeholder="请选择">
          <el-option
            v-for="item in ruleForm.account"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-button type="success" class="btn"
          ><i class="el-icon-menu"></i>新增</el-button
        >
      </el-form-item>
      <!-- 经办人 -->
      <el-form-item label="经办人">
        <el-select v-model="ruleForm.contactperson" placeholder="请选择">
          <el-option
            v-for="item in ruleForm.person"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- 附件 -->
      <el-form-item label="附件" class="form-1">
        <el-upload
          class="upload-demo"
          action="http://118.190.210.28:8080/addFinanceUpload"
          name="finance_EnclosureUpload"
          :on-success="uploadSuccess"
          :on-error="uploadFail"
        >
          <el-button size="small" type="primary">选择文件</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </el-form-item>
      <!-- 备注 -->
      <el-form-item label="备注" class="form-1">
        <el-input type="textarea" v-model="ruleForm.desc"></el-input>
      </el-form-item>
      <!-- 业务员 -->
      <el-form-item label="业务员">
        <el-select v-model="ruleForm.salesman" placeholder="请选择">
          <el-option
            v-for="item in ruleForm.salesperson"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- 保存关闭按钮 -->
      <el-form-item class="savebtn">
        <el-button type="primary" @click="submitForm('ruleForm')"
          >保存</el-button
        >
        <el-button @click="resetForm('ruleForm')">关闭</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { addIMoneyDataAxios } from "../../../http/apis/moneyApi/index";
import { timeFormat } from "../../../utils/utils.js";

export default {
  name: "Modifyinoutcome",
  data() {
    return {
      ruleForm: {
        id: "", // 客户编号
        customnameid: "",
        relative: '',
        inouttype: "", // 选中项
        collect: [], // 展示列表
        date: "",
        desc: "",
        allmoney: "",
        moneyaccount: "", // 资金账户默认展示
        account: [], // 资金账户列表
        person: [], // 经办人列表
        contactperson: "", // 经办人默认展示
        salesman: "", // 业务员默认展示
        salesperson: [], // 业务员列表
        currentPage: 0, // 代表当前页面是收入还是支出
      },
      fileList: [],
      rules: {
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        desc: [{ required: true, message: "请填写", trigger: "blur" }],
      },
    };
  },
  created() {
    const Info = this.$route.query.detailmsg;
    const Msg = this.$route.query.querymsg;
    console.log(Info);
    console.log("Msg:", Msg);
    this.ruleForm.date = Info.inouttime;
    this.ruleForm.inouttype = Info.inoutcategory;
    this.ruleForm.allmoney = Info.inoutmoney;
    this.ruleForm.desc = Info.remarks;
    this.ruleForm.id = Info.money_id;
    this.ruleForm.relative = Info.contact;
    this.ruleForm.customname = Info.customername;
    this.ruleForm.currentPage = Info.inoutcome == "收入" ? 1 : 2;
    this.ruleForm.customnameid = Info.custome_id
    this.convertData(Msg);
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let Finance = {
            finance_No: this.ruleForm.id || 0,
            finance_Enclosure: this.ruleForm.file || "-",
            finance_Date: timeFormat(this.ruleForm.date).split(" ")[0],
            finance_Rae_Category: this.ruleForm.inouttype,
            finance_Money: parseInt(this.ruleForm.allmoney) || 0,
            finance_Account: this.ruleForm.moneyaccount,
            finance_Handler: this.ruleForm.contactperson,
            finance_Remarks: this.ruleForm.desc || "-",
            finance_Salesman: this.ruleForm.salesman || 0,
            finance_Rae: parseInt(this.ruleForm.currentPage),
            finance_Customer: parseInt(this.ruleForm.customnameid),
            finance_Order_No: this.ruleForm.relative,
            finance_State: 0,
          };
          console.log("测试连通：", Finance);
          addIMoneyDataAxios(Finance)
            .then((res) => {
              console.log("上传成功：", res);
              alert("Save!");
            })
            .catch((err) => {
              console.log("上传失败：", err);
            });
        } else {
          console.log("error Save!!");
          return false;
        }
      });
    },
    // 上传成功的回调函数
    uploadSuccess(res) {
      console.log("成功：", res.data);
      this.ruleForm.file = res.data;
    },
    // 上传失败的回调函数
    uploadFail(err) {
      console.log("失败：", err);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-3);
    },
    // 转换成列表选择项
    convertData(Msg) {
      let arr1 = Msg.rae_categoryList;
      arr1.forEach((item) => {
        let obj1 = {
          id: item.rae_Category_No,
          label: item.rae_Category_Name,
          value: item.rae_Category_No,
        };
        this.ruleForm.collect.push(obj1);
      });
      let arr2 = Msg.capital_accountList;
      arr2.forEach((item) => {
        let obj2 = {
          id: item.capital_Account_No,
          label: item.capital_Account_Name,
          value: item.capital_Account_No,
        };
        this.ruleForm.account.push(obj2);
      });
      let arr3 = Msg.employeeFinanceList;
      arr3.forEach((item) => {
        let obj3 = {
          id: item.employee_id,
          label: item.employee_name,
          value: item.employee_id,
        };
        this.ruleForm.person.push(obj3);
      });
      let arr4 = Msg.employeeFinanceList;
      arr4.forEach((item) => {
        let obj4 = {
          id: item.employee_id,
          label: item.employee_name,
          value: item.employee_id,
        };
        this.ruleForm.salesperson.push(obj4);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 1100px;
  margin-top: 20px;
}
.el-form-item {
  width: 500px;
}
.form-1 {
  width: 1000px;
}
.el-input {
  width: 200px;
}
.receiveaddress {
  width: 500px;
}

.btn {
  margin-left: 10px;
  box-sizing: border-box;
}
.savebtn {
  margin-top: 30px;
}
</style>